<template>
  <PageWrapper>
    <a-button @click="addTopSubject">新增一级分类</a-button>
    <Spin :spinning="treeLoading">
      <BasicTree
        title="课程分类"
        toolbar
        checkable
        search
        ref="asyncExpandTreeRef"
        :treeData="subjectData"
        :loading="treeLoading"
        :actionList="actionList"
        :renderIcon="createIcon"
        :beforeRightClick="getRightMenuList"
      />
    </Spin>
    <AddModel @register="registerModel" @update="getSubjectData" />
    <AddTopModal @register="registerTopModel" @update="getSubjectData" />
    <!-- <DeleteConfirmModal @register="registerDeleteConfirmMode" /> -->
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, ref, nextTick, onMounted, h, unref } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import {
    BasicTree,
    TreeActionItem,
    ContextMenuItem,
    TreeActionType,
  } from '/@/components/Tree/index';
  import { getSubject } from '/@/api/preschool/course';
  import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import { Spin } from 'ant-design-vue';
  import { useModal } from '/@/components/Modal';
  import AddModel from './AddModal.vue';
  import AddTopModal from './AddTopModal.vue';
  import { Modal } from 'ant-design-vue';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import { createVNode } from 'vue';
  import { deleteSubjectApi } from '/@/api/preschool/course';
  export default defineComponent({
    components: { PageWrapper, BasicTree, Spin, AddModel, AddTopModal },
    setup() {
      const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
      /**
       * @description 插入新的二级分类
       */
      const [registerModel, { openModal: openAddModel }] = useModal();
      const [registerTopModel, { openModal: openTopModel }] = useModal();
      function getTree() {
        const tree = unref(asyncExpandTreeRef);
        if (!tree) {
          throw new Error('tree 是空的');
        }
        return tree;
      }
      function getRightMenuList(node: any): ContextMenuItem[] {
        return [
          {
            label: '新增',
            handler: () => {
              openAddModel(true, node.key);
            },
            hidden: node.level === 2,
            icon: 'bi:plus',
          },
          {
            label: '编辑',
            handler: () => {
              openAddModel(true, node.key);
            },
            icon: 'bx:bxs-folder-open',
          },
          {
            label: '删除',
            handler: () => {
              deleteSubject(node);
            },
            icon: 'bx:bxs-folder-open',
          },
        ];
      }

      function handlePlus(node: any) {
        console.log(node.key);
        getTree().insertNodeByKey({
          parentKey: node.key,
          node: {
            title: '新增节点',
            key: '1',
          },
          push: 'push',
        });
      }
      /**
       *
       * @param node
       * @description 删除分类节点
       */
      function deleteSubject(node: any) {
        console.log(node);
        if (node.children && node.children.length > 0) {
          console.log('有子分类');
          Modal.confirm({
            title: '删除一级分类警告',
            content: createVNode(
              'div',
              { style: 'color:red;' },
              '该一级分类下还有子分类，是否全部删除',
            ),
            centered: true,
            icon: createVNode(ExclamationCircleOutlined),
            onOk() {
              deleteSubjectApi(node.key).then((_res) => {
                getSubjectData();
              });
            },
            // eslint-disable-next-line @typescript-eslint/no-empty-function
            onCancel() {},
          });
        } else {
          deleteSubjectApi(node.key).then((_res) => {
            console.log('更新数据');
            getSubjectData();
          });
        }
      }
      /**
       * @description 渲染右边图标菜单
       */
      const actionList: TreeActionItem[] = [
        {
          show: (record: Recordable) => {
            if (record.level === 2) return false;
            return true;
          },
          render: (node) => {
            return h(PlusOutlined, {
              class: 'ml-2',
              onClick: () => {
                handlePlus(node);
              },
            });
          },
        },
        {
          render: () => {
            return h(DeleteOutlined);
          },
        },
      ];
      let subjectData = ref([]);
      let treeLoading = ref<boolean>();
      onMounted(() => {
        getSubjectData();
      });
      const getSubjectData = () => {
        treeLoading.value = true;
        getSubject().then((res) => {
          // @ts-ignore
          subjectData.value = res.subjectClassification;
          nextTick(() => {
            unref(asyncExpandTreeRef)?.expandAll(true);
          });
          treeLoading.value = false;
        });
      };
      /**
       * @description 渲染层级图标
       * @param param0
       */
      function createIcon({ level }) {
        if (level === 1) {
          return 'ant-design:book-filled';
        }
        if (level === 2) {
          return 'ant-design:book-twotone';
        }
        return '';
      }
      const addTopSubject = () => {
        openTopModel(true);
      };
      return {
        getRightMenuList,
        subjectData,
        actionList,
        treeLoading,
        createIcon,
        asyncExpandTreeRef,
        registerModel,
        //暴露获取分类信息方法
        getSubjectData,
        addTopSubject,
        registerTopModel,
      };
    },
  });
</script>
